axios: 相当于ajax,之前是用vue-resourse,不过现在这个模块不维护了,基本使用axios
vue-router: 是vue的路由
vuex: 是vue的状态管理,方便组件间通信
npm install vuex axios --save-dev
axios配置如下:
// 引入axios
import axios from 'axios'
// 创建axios实例
const httpService = axios.create({
baseURL: "http://localhost:8081", // url前缀
timeout: 3000 // 请求超时时间
});
// request拦截器
httpService.interceptors.request.use(
config => {
// 根据条件加入token-安全携带
if (true) { // 需自定义
// 让每个请求携带token
config.headers['User-Token'] = '';
}
return config;
},
error => {
// 请求错误处理
Promise.reject(error);
}
)
// respone拦截器
httpService.interceptors.response.use(
response => {
// 统一处理状态
const res = response.data;
if (res.statuscode != 1) { // 需自定义
// 返回异常
return Promise.reject({
status: res.statuscode,
message: res.message
});
} else {
return response.data;
}
},
// 处理处理
error => {
if (error && error.response) {
switch (error.response.status) {
case 400:
error.message = '错误请求';
break;
case 401:
error.message = '未授权,请重新登录';
break;
case 403:
error.message = '拒绝访问';
break;
case 404:
error.message = '请求错误,未找到该资源';
break;
case 405:
error.message = '请求方法未允许';
break;
case 408:
error.message = '请求超时';
break;
case 500:
error.message = '服务器端出错';
break;
case 501:
error.message = '网络未实现';
break;
case 502:
error.message = '网络错误';
break;
case 503:
error.message = '服务不可用';
break;
case 504:
error.message = '网络超时';
break;
case 505:
error.message = 'http版本不支持该请求';
break;
default:
error.message = `未知错误${error.response.status}`;
}
} else {
error.message = "连接到服务器失败";
}
return Promise.reject(error);
}
)
/*网络请求部分*/
/*
* get请求
* url:请求地址
* params:参数
* */
export function get(url, params = {}) {
return new Promise((resolve, reject) => {
httpService({
url: url,
method: 'get',
params: params
}).then(response => {
resolve(response);
}).catch(error => {
reject(error);
});
});
}
/*
* post请求
* url:请求地址
* params:参数
* */
export function post(url, params = {}) {
return new Promise((resolve, reject) => {
httpService({
url: url,
method: 'post',
data: params
}).then(response => {
resolve(response);
}).catch(error => {
reject(error);
});
});
}
/*
* 文件上传
* url:请求地址
* params:参数
* */
export function fileUpload(url, params = {}) {
return new Promise((resolve, reject) => {
httpService({
url: url,
method: 'post',
data: params,
headers: { 'Content-Type': 'multipart/form-data' }
}).then(response => {
resolve(response);
}).catch(error => {
reject(error);
});
});
}
export default {
get,
post,
fileUpload
}
main.js配置:
import axios from './util/axios'
Vue.prototype.$ajax = axios
//this.$ajax.post('/login/login', {});
解决vue-cli测试端口随时变化的方式:
npm install portfinder@1.0.21//在当前机器上查找打开端口的简单工具
打包项目:
npm run build
nginx前端服务器:
修改服务器默认端口
将打包后的项目文件dist目录下的文件放入nginx/html更目录。
cd D:\nginx-1.17.3//进入nginx安装目录
start nginx//启动nginx服务器
tasklist /fi "imagename eq nginx.exe"//查看nginx任务进程
# 重启Nginx
nginx -s reload
# 强制停止nginx服务器,如果有未处理的数据,丢弃
nginx -s stop
# 优雅的停止nginx服务器,如果有未处理的数据,等待处理完成之后停止
nginx -s quit
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用
。你还可以使用@
来通知其他用户。